<template>
	<view class="mine-container" :style="{ height: `${windowHeight}px` }">
		<!-- 未读消息弹出框 -->
		<wd-popup v-model="isUnReadMessagerShow" custom-style="border-radius:16rpx;">
			<view class="message-list">
				<view style="margin-left: 380rpx;">
					<wd-button icon="view" size="small" block @click="handleToNotifyMessage">查看全部</wd-button>
				</view>
				<template v-for="item in list" :key="item.id">
					<div class="message-item">
						<img alt="" class="message-icon" src="/static/images/avatar.gif"
							style="width:72rpx;height:72rpx;border-radius:8px;flex-shrink:0" />
						<div class="message-content">
							<span class="message-title">
								{{ item.templateNickname }}：{{ item.templateContent }}
							</span>
							<span class="message-date">
								{{ formatDate(item.createTime) }}
							</span>
						</div>
					</div>
				</template>


			</view>
		</wd-popup>
		<!--顶部个人信息栏-->
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center">
					<view v-if="!avatar" class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round"
						mode="widthFix">
					</image>
					<view v-if="!name" @click="handleToLogin" class="login-tip">
						点击登录
					</view>
					<view v-if="name" @click="handleToInfo" class="user-info">
						<view class="u_title">
							用户名：{{ name }}
						</view>
					</view>
				</view>
				<!-- <view @click="handleToInfo" class="flex align-center">
					<text>个人信息</text>
					<uni-icons type="right" size="20" color="#bfddfb"></uni-icons>
				</view> -->
			</view>
		</view>

		<view class="content-section">
			<view class="mine-actions grid col-4 text-center">
				<view class="action-item" @click="handleToInfo">
					<view class="iconfont icon-friendfill text-pink icon"></view>
					<text class="text">个人信息</text>
				</view>
				<view class="action-item" @click="handleSalary">
					<view class="iconfont icon-gerenxinzichaxun text-blue icon"></view>
					<text class="text">个人薪资</text>
				</view>
				<view class="action-item" @click="handleAbout">
					<view class="iconfont icon-icon_community text-mauve icon"></view>
					<text class="text">关于青运</text>
				</view>
				<view class="action-item relative" @click="unReadMessagerShow">
					<!-- 图标 + badge -->
					<wd-badge :modelValue="unreadCount">
						<view class="iconfont icon-icon_dianzan text-green icon relative">
						</view>
					</wd-badge>
					<!-- <view class="iconfont icon-icon_dianzan text-green icon relative">
						<view 
							class="">
						155
						</view>
					</view> -->

					<!-- 文字 -->
					<text class="text">我的消息</text>
				</view>
			</view>
			<view class="menu-list">
				<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
					<view class="menu-item-box">
						<view class="iconfont icon-icon-user menu-icon"></view>
						<view>编辑资料</view>
					</view>
				</view>
				<!-- <view class="list-cell list-cell-arrow" @click="handleSalary">
					<view class="menu-item-box">
						<view class="iconfont icon-icon- menu-icon"></view>
						<view>个人薪资</view>
					</view>
				</view> -->
				<!-- <view class="list-cell list-cell-arrow" @click="handleToNotifyMessage">
					<view class="menu-item-box">
						<view class="iconfont icon-gonggaojiansuoicon_aixin menu-icon"></view>
						<view>通知消息</view>
					</view>
				</view> -->
				<view class="list-cell list-cell-arrow" @click="handleToSetting">
					<view class="menu-item-box">
						<view class="iconfont icon-os-icon-setting menu-icon"></view>
						<view>应用设置</view>
					</view>
				</view>
			</view>

		</view>
		<view class="flex justify-center">
			<wd-button type="error" custom-class="custom-shadow" @click="handleLogout">退出登录</wd-button>
		</view>

		<!-- <wd-button type="error" @click="handleLogout">
			退出登录
		</wd-button> -->
	</view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { computed, ref, onMounted } from 'vue';
import { useUserStore } from '@/store/modules/user';
import * as NotifyMessageApi from '@/api/system/notify/message'
import { formatDate } from '@/utils/formatTime'

const store = useUserStore();
const name = computed(() => store.user.nickname);
const avatar = computed(() => store.user.avatar);
// const version = getApp().globalData.config.appInfo.version;

const isUnReadMessagerShow = ref(false)
const unreadCount = ref(0) // 未读消息数量
const list = ref<any[]>([]) // 消息列表

// 获得消息列表
const getList = async () => {
	list.value = await NotifyMessageApi.getUnreadNotifyMessageList()
	// 强制设置 unreadCount 为 0，避免小红点因为轮询太慢，不消除
	unreadCount.value = 0
}
const unReadMessagerShow = () => {
	isUnReadMessagerShow.value = true
	getList()
}
// 获得未读消息数
const getUnreadCount = async () => {
	NotifyMessageApi.getUnreadNotifyMessageCount().then((data) => {
		unreadCount.value = data
	})
}
// ========== 初始化 =========
onMounted(() => {
	// 首次加载小红点
	getUnreadCount()
	// 轮询刷新小红点
	setInterval(
		() => {
			getUnreadCount()
		},
		1000 * 60 * 2
	)
})
onShow(() => {
	getUnreadCount()
})
const windowHeight = computed(() => {
	return uni.getSystemInfoSync().windowHeight - 50;
});

const handleToInfo = () => {
	uni.navigateTo({ url: '/pages/mine/info/index' });
};

const handleToEditInfo = () => {
	uni.navigateTo({ url: '/pages/mine/info/edit' });
};

const handleToSetting = () => {
	uni.navigateTo({ url: '/pages/mine/setting/index' });
};

const handleToLogin = () => {
	uni.reLaunch({ url: '/pages/login/index' });
};

const handleToAvatar = () => {
	console.log('点击了');
	uni.navigateTo({ url: '/pages/mine/avatar/index' });
};

// const handleLogout = () => {
// 	uni.confirm('确定注销并退出系统吗？').then(() => {
// 		store.logout().then(() => {
// 			uni.reLaunch({ url: '/pages/login/index' });
// 		});
// 	});
// };

const handleSalary = () => {
	uni.navigateTo({ url: '/pages/mine/salary/index' });
};

const handleAbout = () => {
	uni.navigateTo({ url: '/pages/mine/about/index' });
};
const handleToNotifyMessage = () => {
	uni.navigateTo({ url: '/pages/mine/notifyMessage/index' });
};
// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定注销并退出系统吗？',
		success: (res) => {
			if (res.confirm) {
				store.logout().then(() => {
					uni.reLaunch({ url: '/pages/login/index' })
				})
			}
		}
	})
}


// const handleBuilding = () => {
// 	uni.showToast('模块建设中~');
// };
</script>

<style lang="scss">
page {
	background-color: #f5f6f7;
}

.message-list {
	display: flex;
	width: 600rpx;
	height: 900rpx;
	flex-direction: column;
	margin: 20rpx;

	.message-item {
		display: flex;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1px solid var(--el-border-color-light);

		&:last-child {
			border: none;
		}

		.message-icon {
			width: 90px;
			height: 40px;
			margin: 0 20px 0 5px;
		}

		.message-content {
			display: flex;
			flex-direction: column;

			.message-title {
				margin-bottom: 5px;
			}

			.message-date {
				font-size: 12px;
				color: var(--el-text-color-secondary);
			}
		}
	}
}

.mine-container {
	width: 100%;
	height: 100%;

	.header-section {
		padding: 15px 15px 45px 15px;
		background-color: #3c96f3;
		color: white;

		.login-tip {
			font-size: 18px;
			margin-left: 10px;
		}

		.cu-avatar {
			border: 2px solid #eaeaea;

			.icon {
				font-size: 40px;
			}
		}

		.user-info {
			margin-left: 15px;

			.u_title {
				font-size: 18px;
				line-height: 30px;
			}
		}
	}

	.content-section {
		position: relative;
		top: -50px;

		.mine-actions {
			margin: 15px 15px;
			padding: 20px 0px;
			border-radius: 8px;
			background-color: white;

			.action-item {
				.icon {
					font-size: 28px;
				}

				.text {
					display: block;
					font-size: 13px;
					margin: 8px 0px;
				}
			}
		}
	}
}

.custom-shadow {
	width: 60%;
}
</style>